<html>
<#include "../common/header.ftl" />

<link rel="stylesheet" type="text/css"
	href="static/dist/css/wangEditor.min.css">
<script type="text/javascript" src="static/dist/js/wangEditor.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#commentBtn').on('click', function() {
			if (($("#textarea1").val().trim()) == '') {
				tip('内容不可为空！');
				return;
			}
			let obj = {};
			obj.uId = parseInt($("#ip1").val().trim());
			obj.newsId = $("#ip2").val();
			obj.content = $("#textarea1").val().trim();
			console.log(JSON.parse(JSON.stringify(obj)))
			$.ajax({
				url : "comment?method=add",
				type : "POST",
				data : JSON.stringify(obj),
				scriptCharset : 'utf-8',
				contentType : "application/json; charset=utf-8",
				success : function(res) {
					let data = JSON.parse(res)
					let item = data.data
					console.log('data=>',data)
					if(data.code === 0 ){
							$("#parent").append("<div class='panel panel-primary'><div class='panel-body'><h4 ><span>"+item[0].user.nickname+"<span style='font-size:16px;color:#ccc'><i>(我)</i></span><span style='margin-left: 25px;font-size:16px;color:#ccc'><i>刚刚</i></span></span></h4></div><div class='panel-footer'><p class='list-group-item-text'>"+item[0].content+" </p></div></div>")
					}
				},
				error : function(res) {
					console.log("error", res);
				}
			});
			/* console.log('data', $('form').serializeArray()) */
		})
		$('#pass').on(
				'click',
				function() {
					$.get("news", {
						method : "pass",
						id : $("#newsId").val()
					}, function(data) {
						$("#box").removeClass("alert-warning").addClass(
								"alert-success");
						$("#admin").hide();
					});
					console.log('data', $('form').serializeArray())
				}), 
				$('#remove').on(
				'click',
				function() {
					$.get("news", {
						method : "remove",
						id : $("#newsId").val()
					}, function(data) {
						$("#box").removeClass("alert-warning").css(
								"backgroundColor", "rgba(255,69,0,0.4)");
						$("#admin").hide();
					});
					console.log('data', $('form').serializeArray())
				})
	});

	function tip (msg){
		$("#warn").text(msg)
		$("#modal-282051").click()
	}
</script>

</head>

<#if Session.user ?? && user.role==1>
<body style="margin-left: 200px">

	<div id="wrapper" class="toggled"><#include "../common/nav.ftl"
		/></div>
	<#else>
<body>
	</#if>

	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<#include "../common/bread.ftl"/>
				<#include "../modal/tips.ftl"/>
				<a id="modal-282051" href="#modal-warns" style="display:none" role="button" class="" data-toggle="modal"></a>
			
				<blockquote>
				<#if Session.user ??>
				${Session.user.nickname }
				<#if Session.user.point gt 100 && Session.user.point lte 200 > <img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_1.png" /></#if>
			<#if Session.user.point gt 201 && Session.user.point lte 300 > <img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_2.png" /></#if>
			<#if Session.user.point gt 301 && Session.user.point lte 400 > <img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_3.png" /></#if>
			<#if Session.user.point gt 401> <img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_4.png" /></#if>
			</#if>
				</blockquote>
				<div id="box"
					class="alert alert-success alert-dismissable"
					<strong>
					<div class="progress">
			<#if Session.user.point gte 0 && Session.user.point lt 200 ><img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_2.png" /></#if>
			<#if Session.user.point gte 200 && Session.user.point lt 300 ><img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_3.png" /></#if>
			<#if Session.user.point gte 300 && Session.user.point lt 400 ><img
			style="width: 18px; padding-bottom:4px"
			src="static/image/v_4.png" /></#if>
			<#if Session.user.point gte 401>  </#if>
					  <div class="progress-bar" role="progressbar" aria-valuenow="${Session.user.point }" aria-valuemin="0" aria-valuemax="
			<#if Session.user.point gte 0 && Session.user.point lt 200 >200</#if>
			<#if Session.user.point gte 200 && Session.user.point lt 300 >300</#if>
			<#if Session.user.point gte 300 && Session.user.point lt 400 >400</#if>
			<#if Session.user.point gte 401>${Session.user.point } </#if>
					  " style="
			<#if Session.user.point gte 0 && Session.user.point lt 200 >width:${Session.user.point/2 }%; </#if>
			<#if Session.user.point gte 200 && Session.user.point lt 300 >width:${Session.user.point/3 }%; </#if>
			<#if Session.user.point gte 300 && Session.user.point lt 400 >${Session.user.point/4 }% </#if>
			<#if Session.user.point gte 400 >width:100% </#if>
					   ">
			<#if Session.user.point gte 0 && Session.user.point lt 200 >${(Session.user.point/2)?string(0.00)} %</#if>
			<#if Session.user.point gte 200 && Session.user.point lt 300 >${(Session.user.point/3)?string(0.00) } %</#if>
			<#if Session.user.point gte 300 && Session.user.point lt 400 >${(Session.user.point/4)?string(0.00) } %</#if>
			<#if Session.user.point gte 400  >100 %</#if>
					  </div>
					</div>
					</strong>
					<p class="text-error">
						<em>我的经验：</em>${Session.user.point } /
						<#if Session.user.point gte 0 && Session.user.point lt 200 >200 </#if>
			<#if Session.user.point gte 200 && Session.user.point lt 300 >300 </#if>
			<#if Session.user.point gte 300 && Session.user.point lt 400 >400 </#if>
			<#if Session.user.point gte 400  ><span style="color:#eea345">MAX</span> </#if>
					</p>
					<p>
						ID：<#if Session.user.id ??>${ Session.user.id }</#if>
					</p>
					
					<p>
						我的身份：<#if Session.user.role ?? && Session.user.role == 0 >普通会员<#else><span style="color:#eea345">超级管理员</span></#if>
					</p>
				</div>
				<#if commentDTOs ?? >
				 <#list commentDTOs as item>
				<div class="list-group">
					<div class="panel panel-primary">
						<div class="panel-body">
							<h4 class="">${item.user.nickname}
								<#if item.user.point gt 100 && item.user.point lt 200 > <img
									style="width: 18px; padding-bottom: 4px"
									src="static/image/v_1.png" /></#if> <#if item.user.point gt
								201 && item.user.point lt 300 > <img
									style="width: 18px; padding-bottom: 4px"
									src="static/image/v_2.png" /></#if> <#if item.user.point gt
								301 && item.user.point lt 400 > <img
									style="width: 18px; padding-bottom: 4px"
									src="static/image/v_3.png" /></#if> <#if item.user.point gt
								401> <img style="width: 18px; padding-bottom: 4px"
									src="static/image/v_4.png" /></#if> <span
									style="margin-left: 25px">${item.createtime?string("yyyy-MM-dd HH:mm:ss")}</span>
							</h4>
						</div>
						<div class="panel-footer">
							<p class="list-group-item-text">${item.content }</p>
						</div>
					</div>
				</div>
				</#list> 
				</#if>
			</div> 
			</div>
		</div>
	</div>
	<script src="static/js/bootstrap.min.js"></script>
</body>
</html>